<template>
  <el-dialog title="快捷回复" v-model="showDialog" @close="handleClose" width="600px">
    <template #title>
      <span class="tab-btn" :class="{ active: active }" @click="active = true">列表</span>
      <span class="tab-btn" :class="{ active: !active }" @click="active = false">新增</span>
    </template>
    <div class="custom-tabs-warp">
      <div class="custom-tab-item" v-show="active">
        <el-input size="small" v-model="keyword" placeholder="按关键字搜索" prefix-icon="el-icon-search"></el-input>
        <div class="tags-box">
          <el-button class="button-new-tag" size="mini" @click="active = false">+ New Tag</el-button>
          <el-tag
            v-for="(item, index) in candidates"
            :key="item.id"
            :disable-transitions="false"
            closable
            size="medium"
            @close="handleDel(item, index)"
            @click="handleSelection(item)"
          >{{ item.name }}</el-tag>
        </div>
      </div>
      <div class="custom-tab-item" v-show="!active">
        <el-form :model="tips" :rules="rules" ref="form" size="small">
          <el-form-item prop="name">
            <el-input v-model="tips.name" auto-complete="off" placeholder="名称"></el-input>
          </el-form-item>
          <el-form-item prop="content">
            <el-input
              type="textarea"
              :rows="5"
              v-model="tips.content"
              auto-complete="off"
              placeholder="内容"
            ></el-input>
          </el-form-item>
          <el-from-item>
            <el-button @click="handleCancel" size="small">取 消</el-button>
            <el-button type="primary" @click="handleSubmit()" size="small">提 交</el-button>
          </el-from-item>
        </el-form>
      </div>
    </div>
  </el-dialog>
  <div @click="handleClick">
    <slot></slot>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus"
import { getTips, addTips, delTips } from '../../api/tips'
import { reactive, ref, toRefs, watch, defineComponent, watchEffect } from "vue"

const emit = defineEmits(['setMsgBody'])

const state = reactive({
  tips: {},
  tipsList: [],
  candidates: [],
  user_id: null,
  showDialog: false,
  active: true,
  keyword: '',
})

const rules = {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入内容', trigger: 'blur' }
  ],
}

const form = ref(null)

state.user_id = Number(window.sessionStorage.getItem('user_id'))

watchEffect(() => {
  if (state.keyword) {
    state.candidates = state.tipsList.filter(item => item.name.includes(state.keyword))
  } else {
    state.candidates = state.tipsList
  }
})

const handleClose = () => {
  if (form.value) {
    form.value.resetFields()
  }
}

const handleClick = () => {
  state.showDialog = true
}

const handleSelection = (tips) => {
  state.showDialog = false
  emit("setMsgBody", tips.content, 1)
}

const handleDel = async (tips, index) => {
  let { status, message } = delTips(tips.id)
  if (status === "success") {
    state.tipsList.splice(index, 1)
    ElMessage.success("删除成功")
  } else {
    ElMessage.success(message)
  }
}

const handleSubmit = async () => {
  form.value.validate((valid) => {
    if (!valid) {
      console.log('error submit!!')
      return false
    }

    let result = addTips(state.tips)
    if (result.status == "success") {
      state.tipsList.push(result.data)
      state.showDialog = false
      state.active = true
      state.tips = {}
      ElMessage.success("添加成功")
    } else {
      ElMessage.success(result.message)
    }
  })
}

const handleCancel = () => {
  form.value.resetFields()
}

getTips(state.user_id).then(result => {
  if (result.status == "success") {
    state.tipsList = result.tips_list
  } else {
    console.log(result.message)
  }
})

const { tips, candidates, showDialog, active, keyword } = toRefs(state)

</script>

<style scoped>
.tips-tab-btn {
  display: inline-block;
  margin-right: 20px;
  font-size: 16px;
}

.active {
  color: rgb(64, 158, 255);
}

.button-new-tag,
.el-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}

.tags-box {
  padding-top: 10px;
  max-height: 160px;
  overflow: auto;
}

.tab-btn {
  display: inline-block;
  margin-right: 40px;
}

.tab-btn > .active {
  color: #409eff;
}

.el-dialog__body {
  padding-top: 10px;
}

.custom-tabs-warp {
  margin-top: -20px;
}

.custom-tab-item {
  height: 200px;
}
</style>